<!--
* @author wn
* @date 2022/05/20 10:21:39
* @description: 页面最下方 无限加载组件  观察是否进入可视区  开启无限加载
!-->
<template>
	<div class="xtx-infinite-loading" ref="target">
		<div class="loading" v-show="loading">
			<span class="imgLoading"></span>
			<span class="text">正在加载...</span>
		</div>
		<div class="none" v-if="finished">
			<span class="imgNone"></span>
			<span class="text">亲，没有更多了</span>
		</div>
	</div>
</template>
<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
	name: 'XtxInfiniteLoading',
	props: {
		loading: {
			type: Boolean,
			default: false,
		},
		finished: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, { emit }) {
		const target = ref(null)
		// 观察是否进入可视区  触发加载
		useIntersectionObserver(
			target,
			([{ isIntersecting }]) => {
				// console.log('目标元素的可见性', isIntersecting)
				// 如果目标可见，发送请求
				if (isIntersecting) {
					!props.loading && !props.finished && emit('infinite')
				}
			},
			{ threshold: 0 }
		)
		return { target }
	},
}
</script>
<style scoped lang="less">
.xtx-infinite-loading {
	.loading,
	.none {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		.text {
			color: #999;
			font-size: 16px;
		}
	}
	.imgLoading {
		width: 50px;
		height: 50px;
		background: url(~@/assets/images/load.gif) no-repeat center / contain;
	}
	.imgNone {
		width: 200px;
		height: 134px;
		background: url(~@/assets/images/none.png) no-repeat center / contain;
	}
}
</style>
